<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-timeline.qdoc -->
  <title>Creating Animations | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Creating Animations</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="qtquick-properties.html" />
  <link rel="next" href="qmldesigner-connections.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qtquick-properties.html">Specifying Item Properties</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="qmldesigner-connections.html">Adding Connections</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#enabling-the-timeline-editor">Enabling the Timeline Editor</a></li>
<li class="level1"><a href="#creating-timelines">Creating Timelines</a></li>
<li class="level2"><a href="#binding-animations-to-states">Binding Animations to States</a></li>
<li class="level1"><a href="#managing-keyframes">Managing Keyframes</a></li>
<li class="level2"><a href="#navigating-the-timeline">Navigating the Timeline</a></li>
<li class="level2"><a href="#setting-keyframe-values">Setting Keyframe Values</a></li>
<li class="level1"><a href="#viewing-the-animation">Viewing the Animation</a></li>
<li class="level1"><a href="#editing-easing-curves">Editing Easing Curves</a></li>
<li class="level2"><a href="#attaching-easing-curves-to-keyframes">Attaching Easing Curves to Keyframes</a></li>
<li class="level2"><a href="#customizing-easing-curves">Customizing Easing Curves</a></li>
<li class="level1"><a href="#editing-animation-curves">Editing Animation Curves</a></li>
<li class="level1"><a href="#rotating-items">Rotating Items</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Creating Animations</h1>
<span class="subtitle"></span>
<!-- $$$studio-timeline.html-description -->
<div class="descr"> <a name="details"></a>
<p>You can use the timeline and keyframe based editor in the <b>Timeline</b> view to animate the properties of UI components. Animating properties enables their values to move through intermediate values instead of immediately changing to the target value. For example, to move an item in a scene, you can animate the properties that control the item's position, x and y, so that the item's position changes at keyframes on the way to the target position. Similarly, you could change the color and scale properties of the item at keyframes to make it appear to move closer or farther away.</p>
<p>Qt Quick allows you to declare various UI states in <a href="http://doc.qt.io/qt-5/qml-qtqml-statemachine-state.html">State</a> objects. These states are comprised of property changes from a base state, and can be a useful way of organizing your UI logic. Transitions are objects you can associate with an item to define how its properties will animate when they change due to a state change.</p>
<p>You can find a video tutorial about creating timelines and adding keyframes <a href="https://resources.qt.io/development-topic-ui-design/qtdesignstudio-clustertutorial-parttwo">here</a>.</p>
<a name="enabling-the-timeline-editor"></a>
<h2 id="enabling-the-timeline-editor">Enabling the Timeline Editor</h2>
<p>The <b>Timeline</b> view is not visible in Qt Creator by default. To enable it, select <b>Tools</b> &gt; <b>Options</b> &gt; <b>Qt Quick</b> &gt; <b>Qt Quick Designer</b> &gt; <b>Enable Timeline editor</b>. You need to restart Qt Creator for the <b>Timeline</b> view to appear.</p>
<p>To be able to create timelines, you also need the <a href="http://doc.qt.io/qt-5/qtquicktimeline-index.html">Qt Quick Timeline</a> module, which is delivered with Qt 5.14, and later. For more information about adding the module to an older Qt version, see <a href="quick-converting-ui-projects.html#adding-qt-quick-timeline-module-to-qt-installations">Adding Qt Quick Timeline Module to Qt Installations</a>.</p>
<a name="creating-timelines"></a>
<h2 id="creating-timelines">Creating Timelines</h2>
<p>You specify settings for the timeline and for running the animation in the <b>Timeline Settings</b> dialog.</p>
<p class="centerAlign"><img src="images/studio-timeline-settings.png" alt="&quot;Timeline Settings dialog&quot;" /></p><p>To create a timeline to animate a UI component:</p>
<ol class="1" type="1"><li>In the <b>Navigator</b>, select the item to animate.</li>
<li>Select the <b>Timeline</b> tab to open the <b>Timeline</b> view.</li>
<li>Select the <img src="images/plus.png" alt="" /> (<b>Add Timeline (A)</b>) button, or press <b>A</b> to specify settings for the timeline and running the animation in the <b>Timeline Settings</b> dialog.</li>
<li>In the <b>Timeline ID</b> field, enter a name that describes the animated item.</li>
<li>In the <b>End frame</b> field, set the duration of the animation.</li>
<li>To use bindings to specify the properties, select the <b>Expression binding</b> radio button and enter the binding in the <b>Expression binding</b> field. For more information about property binding, see <a href="quick-components.html#setting-bindings">Setting Bindings</a>.</li>
<li>To create a timeline animation, select the <b>Animation</b> radio button.</li>
<li>In the <b>timelineAnimation</b> tab, <b>Animation ID</b> field, enter a name for the animation.</li>
<li>Select the <b>Running in Base State</b> check box to use the settings in this tab when previewing the UI. Deselect the check box to use the default settings.</li>
<li>In the <b>Start frame</b> field, set the first frame of the animation.</li>
<li>In the <b>End frame</b> field, set the last frame of the animation.</li>
<li>In the <b>Duration</b> field, set the length of the animation from the start frame to the end frame. If you set a shorter duration than the number of frames, frames are left out from the end of the animation when viewing it.</li>
<li>Select the <b>Continuous</b> check box to loop the animation indefinitely.</li>
<li>In the <b>Loops</b> field, select the number of times to run the animation as a loop. The default number of loops is one, which means that you must restart the animation to see it again</li>
<li>Select the <b>Ping pong</b> check box to play the animation backwards back to the beginning when it reaches the end.</li>
<li>In the <b>Transitions to states</b> field, select the state to switch to when the animation finishes.</li>
<li>Select <b>Close</b> to close the dialog and save the settings.</li>
</ol>
<p>To create additional timelines, select the <img src="images/plus.png" alt="" /> (<b>Add Timeline</b>) button next to the <b>timeline</b> tab.</p>
<p>To specify settings for running the timeline animations, select the <img src="images/plus.png" alt="" /> (<b>Add Animation</b>) button next to the <b>Animation Settings</b> group. For example, you could create settings for running a part of the timeline animation between specified frames or for running the animation backwards from the last frame to the first.</p>
<p>To modify the settings, select the <img src="images/animation.png" alt="" /> (<b>Timeline Settings (S)</b>) button on the toolbar (or press <b>S</b>) in the <b>Timeline</b> view.</p>
<a name="binding-animations-to-states"></a>
<h3 id="binding-animations-to-states">Binding Animations to States</h3>
<p>The table at the bottom of the <b>Timeline Settings</b> dialog lists the available states. Double-click the values in the <b>Timeline</b> and <b>Animation</b> column to bind the states to animations. In the <b>Fixed Frame</b> column, you can bind the states that don't have animations to fixed frames.</p>
<a name="managing-keyframes"></a>
<h2 id="managing-keyframes">Managing Keyframes</h2>
<p>To animate components in the <b>Timeline</b> view, move to a frame on the timeline and specify changes in the values of a property. Qt Design Studio automatically adds keyframes between two keyframes, and sets their values evenly to create an appearance of movement or transformation.</p>
<a name="navigating-the-timeline"></a>
<h3 id="navigating-the-timeline">Navigating the Timeline</h3>
<p class="centerAlign"><img src="images/studio-timeline.png" alt="&quot;Timeline view&quot;" /></p><p>You can navigate the timeline in the following ways:</p>
<ul>
<li>Drag the playhead (1) to a frame.</li>
<li>Click on the ruler (2) to move to a frame.</li>
<li>Select the <b>To Start (Home)</b>, <b>Previous (,)</b>, or <b>Next (.)</b> buttons (3), or use the keyboard shortcuts to move to the first, previous, or next frame on the timeline.</li>
<li>Enter the number of a frame in the field (4) to move to that frame.</li>
<li>Select the <b>Previous</b> and <b>Next</b> buttons next to a property name on the timeline (5) to move to the previous or next keyframe for that property.</li>
</ul>
<a name="setting-keyframe-values"></a>
<h3 id="setting-keyframe-values">Setting Keyframe Values</h3>
<p>You can insert keyframes for all the properties of all the components that you want to animate first, and then record the changes in their values by selecting the <img src="images/recordfill.png" alt="" /> (<b>Per Property Recording</b>) button for one property at a time. For example, you can hide and show items by turning their visibility off and on or by setting their opacity to 0 or 1.</p>
<p>You can also select the <b>Auto Key (K)</b> button (or press <b>K</b>) to record changes in property values, but you need to be more careful about which property values you are changing to avoid surprises.</p>
<p>To record the changes of property values:</p>
<ol class="1" type="1"><li>In the <b>Navigator</b>, select the item to animate.</li>
<li>In the <b>Properties</b> view, select <b>Settings</b> &gt; <b>Insert Keyframe</b> for the property that you want to animate.</li>
<li>Select the <b>Per Property Recording</b> button to start recording property changes.</li>
<li>Check that the playhead is in frame 0 and enter the value of the property in the field next to the property name on the timeline. Press <b>Enter</b> to save the value.</li>
<li>Move the playhead to another frame on the timeline and specify the value at that frame.</li>
<li>When you have specified as many values as you need, select <b>Per Property Recording</b> again to stop recording.</li>
</ol>
<p>To remove all the changes you recorded for a property, right-click the property name on the timeline and select <b>Remove Property</b>.</p>
<p>Keyframes are marked on the timeline by using markers of different colors and shapes, depending on whether they are active or inactive or whether you have applied easing curves to them, for example.</p>
<p>To edit the value of a keyframe, double-click a keyframe marker or select <b>Edit Keyframe</b> in the context menu. In the <b>Frame</b> field, you can set the frame and the value:</p>
<p class="centerAlign"><img src="images/studio-edit-keyframe.png" alt="&quot;Edit Keyframe dialog&quot;" /></p><p>You can copy the keyframes from the keyframe track for an item and paste them to the keyframe track of another item. To copy all keyframes from one item to another one, select an item, and then select <b>Copy All Keyframes</b> in the context menu. Then select the other item and select <b>Paste Keyframes</b> in the context menu.</p>
<p>To delete the selected keyframe, select <b>Delete Keyframe</b> in the context menu.</p>
<p>To delete all keyframes from the selected item, select <b>Delete All Keyframes</b> in the context menu.</p>
<p>To add keyframes to the keyframe track of an item at the current position of the playhead select <b>Add Keyframes at Current Frame</b>.</p>
<a name="viewing-the-animation"></a>
<h2 id="viewing-the-animation">Viewing the Animation</h2>
<p>You can view the animation on the canvas by moving the playhead along the timeline.</p>
<a name="editing-easing-curves"></a>
<h2 id="editing-easing-curves">Editing Easing Curves</h2>
<p><i>Easing</i> specifies the rate of a property value over time, so that components can appear to pick up speed, slow down, or bounce back at the end of the animation. By default, the animations you specify on the timeline are <i>linear</i>, which means that they move from the beginning to the end at a constant speed. You can use the <b>Easing Curve Editor</b> to edit the easing curve between two keyframes. You can also use the more advanced <b>Curve Editor (C)</b> to edit the curves for the whole animation.</p>
<a name="attaching-easing-curves-to-keyframes"></a>
<h3 id="attaching-easing-curves-to-keyframes">Attaching Easing Curves to Keyframes</h3>
<p class="centerAlign"><img src="images/studio-easing-curve-editor.png" alt="&quot;Easing Curve Editor&quot;" /></p><p>You can use the preset curves or modify them by dragging the curve handlers around. You can add points to the curve and drag them and the point handlers to modify the curve. When you are happy with the curve, you can save it as a custom curve. For more information about easing curve types, see the documentation for <a href="http://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html">easing curves</a>.</p>
<p>To zoom into and out of the easing curve editor, use the mouse roller. To reset the zoom factor, right-click in the picker and select <b>Reset Zoom</b>.</p>
<p>To attach easing curves to keyframes:</p>
<ol class="1" type="1"><li>Right-click a keyframe on the timeline and select <b>Easing Curve Editor</b> in the context menu.</li>
<li>Select an easing curve in the <b>Presets</b> tab.</li>
<li>In the <b>Duration (ms)</b> field, select the duration of the easing function in milliseconds.</li>
<li>Select <b>Preview</b> to preview the curve.</li>
<li>Select <b>OK</b> to attach the easing curve to the keyframe and to close the easing curve editor.</li>
</ol>
<p>When you attach easing curves to keyframes, the shape of the keyframe marker changes from <img src="images/keyframe_linear_inactive.png" alt="" /> to <img src="images/keyframe_manualbezier_inactive.png" alt="" /> .</p>
<a name="customizing-easing-curves"></a>
<h3 id="customizing-easing-curves">Customizing Easing Curves</h3>
<p>To customize easing curves:</p>
<ol class="1" type="1"><li>In the <b>Easing Curve Editor</b>, select an easing curve in the <b>Presets</b> tab.</li>
<li>Drag the curve handlers to modify the curve.</li>
<li>Right-click in the editor, and select <b>Add Point</b> to add points to the curve.</li>
<li>Drag the points or the point handlers to modify the curve. If the curve becomes invalid, it turns red in the editor and the <b>Save</b> button is disabled.</li>
<li>Select <b>Save</b> to save your changes to the curve.</li>
<li>In the <b>Name</b> field, enter a name for the custom curve, and then select <b>OK</b> to save the curve in the <b>Custom</b> tab.</li>
</ol>
<p>To paste easing curve definitions to the easing curve editor as text, select the <b>Text</b> tab.</p>
<a name="editing-animation-curves"></a>
<h2 id="editing-animation-curves">Editing Animation Curves</h2>
<p>In the curve editor, you can view and modify the whole animation curve. You can insert keyframes to the curve and drag them and the point handlers to modify the curve. You can modify the appearance of the curve in the style editor.</p>
<p>You can also edit easing curves that you added with the easing curve editor.</p>
<p class="centerAlign"><img src="images/studio-curve-editor.png" alt="&quot;Curve Editor&quot;" /></p><p>To edit animation curves:</p>
<ol class="1" type="1"><li>In the <b>Timeline</b> view, insert at least one keyframe.</li>
<li>Select <img src="images/curveGraphIcon.png" alt="" /> (<b>Curve Editor (C)</b> on the toolbar or press <b>C</b> to open the curve editor.</li>
<li>Right-click in the curve editor, and select <b>Insert Keyframe</b> to add a keyframe.</li>
<li>Select keyframes to display the easing curves attached to them. To select multiple keyframes, press and hold <b>Ctrl</b>.</li>
</ol>
<p>Your changes are automatically saved when you close the editor.</p>
<a name="rotating-items"></a>
<h2 id="rotating-items">Rotating Items</h2>
<p>To animate components that rotate around a central point, you can use the <a href="http://doc.qt.io/qt-5/qml-qtquick-item.html">Item</a> QML type as a parent for the rotating component. Then create a timeline for the Item and set the rotation property for the start and end keyframes.</p>
</div>
<!-- @@@studio-timeline.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qtquick-properties.html">Specifying Item Properties</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="qmldesigner-connections.html">Adding Connections</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
